<!--
 * @Description: 墙布添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-10 12:49:19
 * @FilePath: /yuxiuproweb/src/views/goods/productType/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="600px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="父级" prop="type">
            <treeselect
              v-model="form.fid"
              :options="ProductTypeArr"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级类型"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="typeName">
            <el-input v-model="form.typeName" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
    <!-- 选择复杂加工 -->
    <machine-part-view
      v-if="machine.show"
      :show.sync="machine.show"
      @on-change="handleMachineChange"
    ></machine-part-view>
  </el-dialog>
</template>

<script>
import {
  getProductTypeListItem,
  addProductTypeListItem,
  updateProductTypeListItem,
} from "@/api/goods/productType";
import request from "@/utils/request";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      machine: {
        show: false,
      },
      // 表单参数
      form: {
        id: "",
        fid: "0",
        typeName: "",
      },
      // 表单校验
      rules: {
        typeName: [
          { required: true, message: "名称不能为空", trigger: "change" },
        ],
      },
      productType: [],
      ProductTypeArr: [],
      defaultProps: {
        children: "children",
        label: "typeName",
        value: "typeName",
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加类型",
        edit: "修改类型",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    } else if (this.type === "add" && !!this.data) {
      // console.log(this.data, "add");
      this.form.fid = this.data.id;
      this.form.typeName = "";
    }
    this.getProductType(); //获取营销类型
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      // console.log(this.data);
      getProductTypeListItem(this.data.id).then((res) => {
        this.form = res.data;
        // this.ProductTypeArr = [];
        // this.ProductTypeArr = this.handleTree(res.data, "id");
        //
        // const rootVal = { id: 0, typeName: "主类型", children: [] };
        // if (this.form.type) {
        //   this.productType = this.form.type.split("/");
        // }
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);
      // return;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!!this.form.id) {
            updateProductTypeListItem(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addProductTypeListItem(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    getProductType() {
      this.ProductTypeArr = [];
      request({
        url: "/app/userProductType/getType",
        method: "get",
      }).then((res) => {
        const rootVal = { id: 0, typeName: "主类型", children: [] };
        res.rows.push(rootVal);
        this.ProductTypeArr = this.changeFormat(res.rows);
      });
    },
    /** 转换数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.typeName,
        children: node.children,
      };
    },
    //
    changeFormat(data) {
      const result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      data.forEach((item) => {
        delete item.children;
      });
      const map = {};
      data.forEach((item) => {
        map[item.id] = item;
      });
      data.forEach((item) => {
        const parent = map[item.fid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
